import React, { Component } from 'react';
import { Grid, Search, DatePicker } from '@alifd/theme-ds-jxc';
import IceContainer from '@icedesign/container';
import PageHead from '../../../../components/PageHead';

import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';

const { RangePicker } = DatePicker;
const { Row, Col } = Grid;
export default class chooseHead extends Component {
  static displayName = 'Overview';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      filterData: {
        search: '',
        time: [],
      },
    };
  }
  onFormChange = (value) => {
    this.setState(
      {
        filterData: value,
      }, () => {
        this.props.filterChange(this.state.filterData);
      }
    );
  };

  render() {
    return (
      <div style={styles.overview}>
        <PageHead title="付款记录筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper onChange={this.onFormChange}>
            <Row gutter="5">
              <Col span="7">
                <span className="SelectLabel">付款时间</span>
                <IceFormBinder name="time">
                  <RangePicker size="large" className="DatePicker" />
                </IceFormBinder>
              </Col>
              <Col span="7">
                <span className="SelectLabel">供应商搜索</span>
                <IceFormBinder name="search">
                  <Search
                    type="normal"
                    placeholder="请输入供应商名称或供应商联系人"
                    size="medium"
                    className="Select"
                  />
                </IceFormBinder>
              </Col>
            </Row>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  col: {
    margin: '10px 20px 10px 0',
    float: 'left',
  },
  Select: {
    float: 'left',
    width: '200px',
    height: '38px',
  },
  date: {
    float: 'left',
    height: '38px',
    width: '300px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  search: {
    width: '300px',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
};
